<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParam"
                @on-search="search"
                @on-reset="resetSearch"
              ></pro-query>
            </div>
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :toolbar="toolbar"
              :operate="operate"
              :param="state.param"
              :pagination="pagination"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
      <importModal
        :exportConfig="exportConfig"
        :visible="state.importVisible"
        @close="closeImport"></importModal>
    </page-layout>
  </div>
</template>

<script>
import { btnIsPowerByCode, filterEmptyByObject } from "@/tools/common";
import { createVNode, onActivated, reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { page, remove, imports, templateUrl } from "@/api/module/project";
import { message, modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import moment from "moment";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import importModal from '@/component/import/index.vue'
export default {
  name: "project-manage",
  components: {
    importModal
  },
  setup() {
    const tableRef = ref();
    const removeKey = "remove";
    const router = useRouter();
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };
    const exportConfig = reactive({
      title: '项目管理',
      exportExcel: imports,
      templateUrl: templateUrl,
      downMethod: 'GET',
      fileName: '项目管理导入模板',
      params: {}
    })
    const handleExport = () => {
      state.importVisible = true
    };
    const closeImport = (value) => {
      state[value] = false
      tableRef.value.reload()
    }
    let searchParam = ref([]);

    const toolbar = [
      {
        code: "project-manage-list:add",
        label: "新增",
        type: "primary",
        event: (selectedRowKeys) => {
          gotoPage();
        },
      },
      {
        code: '',
        label: '批量导入',
        type: '',
        event: (selectedRowKeys) => {
          handleExport()
        }
      },
    ];

    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };

    const search = (value) => {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
        startCreateTime: value.createTime
          ? moment(value.createTime[0]).valueOf()
          : undefined,
        endCreateTime: value.createTime
          ? moment(value.createTime[1]).valueOf()
          : undefined,
      };
      delete state.param.createTime;
    };
    const columns = [
      { dataIndex: "code", key: "code", title: "项目编码" },
      { dataIndex: "projectName", key: "projectName", title: "项目名称", ellipsis: true, },
      {
        dataIndex: "responsiblePersonName",
        key: "responsiblePersonName",
        title: "对接人",
      },
      {
        dataIndex: "projectAddress",
        key: "projectAddress",
        title: "项目地址",
      },
      {
        dataIndex: "schoolYear",
        key: "schoolYear",
        title: "学年",
      },
      {
        dataIndex: "quarter",
        key: "quarter",
        title: "季度",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.QUARTER]
            ? dictLists.data[dictEnum.QUARTER].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
      {
        dataIndex: "shape",
        key: "shape",
        title: "项目形式",
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.SHAPE]
            ? dictLists.data[dictEnum.SHAPE].find((v) => v.value == data)
            : {};
          return item ? item.label : "";
        },
      },
    ];

    const operate = [
      {
        label: "详情",
        event: (record) =>
          router.push({
            path: "/university/project-manage/detail",
            query: {
              id: record.id,
            },
          }),
      },
      {
        code: 'project-manage-list:remove',
        label: "删除",
        event: (record) => {
          removeMethod(record);
        },
      },
    ];

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此配置?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {
        projectName: "",
        schName: "",
        responsiblePerson: "",
      },
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      importVisible: false,
      recordEdit: {},
      recordInfo: {},
    });

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const gotoPage = () => {
      router.push("/university/project-manage/add");
    };

    const resetSearch = () => {
      state.param = {};
    };
    let dictLists = reactive({
      data: {},
    });
    onMounted(async () => {
      console.log('onMounted: project');
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.PROJECT_STATE,
        dictEnum.PROJECT_SPEED,
        dictEnum.SHAPE,
        dictEnum.QUARTER,
      ]);
      searchParam.value = [
        {
          key: "projectName",
          type: "input",
          label: "项目名称",
          placeholder: "请输入项目名称",
        },
        {
          key: "schName",
          type: "input",
          label: "学校名称",
          placeholder: "请输入学校名称",
        },
        {
          key: "schoolYear",
          type: "input",
          label: "学年",
          placeholder: "请输入学年",
        },
        {
          key: "quarter",
          type: "select",
          label: "季度",
          placeholder: "请选择季度",
          options: dictLists.data[dictEnum.QUARTER] || [],
          hidden: true
        },
        {
          key: "shape",
          type: "select",
          label: "项目形式",
          placeholder: "请选择项目形式",
          options: dictLists.data[dictEnum.SHAPE] || [],
          hidden: true
        },
        // {
        //   key: "responsiblePersonName",
        //   type: "input",
        //   label: "对接人",
        //   placeholder: "请输入对接人",
        //   hidden: true
        // },
      ]
    })
    onActivated(async () => {
      tableRef.value.reload();
    });

    return {
      search,
      searchParam,
      columns,
      operate,
      fetch,
      pagination,
      state,
      onSelectChange,
      gotoPage,
      toolbar,
      tableRef,
      resetSearch,
      exportConfig,
      closeImport
    };
  },
};
</script>

<style scoped>
</style>
